<template>
    <div>
        <div style="padding: 8px 0 5px 0;display:inline-block;width:100%;overflow:hidden;">
            <submit-button :loading="deleting" type="danger" size="small" v-if="selected.length>0" @click="recover">
                <i class="el-icon-delete"></i> 删除话题
            </submit-button>
            <refresh-button @click="fetch" :loading="fetching"></refresh-button>
            <div style="float:right;text-align:right;">
                <search v-model="filter" @search="fetch"></search>
            </div>
        </div>
        <el-table :data="paged.items" border @selection-change="selectionchange">
            <el-table-column type="selection" width="40" aligin="center"></el-table-column>
            <el-table-column label="话题" prop="name"></el-table-column>
            <el-table-column prop="isOnline" align="center" width="100">
                <template slot-scope="scope">
                    {{scope.row.isOnline ? '已上线': '未上线'}}
                </template>
            </el-table-column>
            <el-table-column label="#" width="100" align="center">
                <template slot-scope="item">
                    <el-button type="text" @click="recover(item.row)">
                        <i class="el-icon-delete" style="color:red"></i>
                    </el-button>
                    <el-button type="text" @click="emitEdit(item.row)">
                        <i class="el-icon-edit"></i>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <awesome-pagination :page="page" :total="paged.totalCount" @change="fetch"></awesome-pagination>
    </div>
</template>

<script>
import Vue from "vue";
import { getTopics, deleteTopics } from "@/api/dicts/topic";

import { AwesomePagination } from "awesome-element-ui";
Vue.use(AwesomePagination);

import Search from "./search.vue";
import { RefreshButton, SubmitButton } from "@/components/aws-comp/index";

export default {
    data() {
        return {
            filename: __filename,
            /**请求接口返回 */
            paged: {},
            page: { skipCount: 0, maxResultCount: 10 },
            selected: [],
            filter: {},
            fetching: false,
            deleting: false
        };
    },
    components: {
        search: Search,
        "refresh-button": RefreshButton,
        "submit-button": SubmitButton
    },
    computed: {
        selectedIds: function() {
            return this.selected.map(function(item) {
                return item.id;
            });
        }
    },
    methods: {
        fetch: function() {
            var options = { filter: this.filter, page: this.page };
            this.fetching = true;
            var vm = this;
            getTopics(options)
                .then(function(paged) {
                    vm.fetching = false;
                    vm.paged = paged;
                })
                .catch(() => {
                    vm.fetching = false;
                });
        },
        recover: function(topic) {
            this.$confirm("确定要放入回收站吗？")
                .then(this.doRecover.bind(this, topic))
                .catch(() => {});
        },
        doRecover: function(topic) {
            var ids = topic && topic.id ? [topic.id] : this.selectedIds;
            var vm = this;
            this.deleting = true;
            deleteTopics({ ids: ids })
                .then(function() {
                    vm.deleting = false;
                    vm.fetch();
                })
                .catch(() => {
                    vm.deleting = false;
                });
        },
        emitEdit: function(topic) {
            this.$emit("edit", topic);
        },
        selectionchange: function(vals) {
            this.selected = vals;
        }
    },
    created() {
        this.fetch();
    }
};
</script>
